<template>
  <div class="bar" @mousedown="moveDown" @dblclick="fullScreen">
    <div class="logo">
      <img src="../assets/logo.png" class="img">
    </div>
    <div class="name">
      密码管理器
    </div>
    <div class="icons">
      <template v-if="store.getters.isLogin">
        <div class="icon" @click.stop="toHome" @dblclick.stop @mousedown.stop @mouseup.stop>
          <el-icon><House /></el-icon>
        </div>
        <div class="icon" @click.stop="visual=true"
             @dblclick.stop @mousedown.stop @mouseup.stop>
          <el-icon><Setting /></el-icon>
        </div>
        <Settings v-model:visual="visual"/>
      </template>
      <div class="icon" @click.stop="minimize" @dblclick.stop  @mousedown.stop @mouseup.stop>
        <el-icon><Minus /></el-icon>
      </div>
      <div class="icon" @click.stop="fullScreen" @dblclick.stop  @mousedown.stop @mouseup.stop>
        <el-icon><FullScreen /></el-icon>
      </div>
      <div class="icon" @click.stop="close" @dblclick.stop  @mousedown.stop @mouseup.stop>
        <el-icon><Close /></el-icon>
      </div>
    </div>
  </div>
</template>

<script>
import sys from '@/utils/system'
import { ref, watch} from "vue";
import {useStore} from "vuex";
import router from "@/router";
import Settings from "@/components/Settings";

export default {
  name: `TaskBar`,
  components: {Settings},
  setup(){
    const visual=ref(false);

    const store=useStore();
    const position=ref({
      x:0,
      y:0,
    })
    const moveDown=(e)=>{
      position.value.x = e.x
      position.value.y = e.y

      document.onmousemove = (ev) => {
        const x = ev.screenX - position.value.x
        const y = ev.screenY - position.value.y
        // 给主进程传入坐标
        sys.appMove(x,y);
      };
      document.onmouseup = (ev) => {
        document.onmousemove=null;
        document.onmouseup=null;
      };
    };
    const toHome=()=>{
      router.push('/home')
    }
    watch(()=>store.getters.isLogin,(newValue)=>{
      console.log(newValue)
    })
    return{
      ...sys,
      moveDown,
      store,
      toHome,
      visual
    }
  }
}
</script>

<style scoped lang="less">
.bar{
  --height:32px;
  background-image:linear-gradient(271deg,#f7f0ac,#acf7f0,#f0acf7);
  height: 100%;
  width: 100%;
  line-height: var(--height);
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
  user-select: none;
}
.logo{
  float: left;
  margin-top: 4px;
  margin-left: 4px;
}
.img{
  width: 24px;
  height: 24px;
}
.name{
  float: left;
  position: relative;
  margin-left: 8px;
}
.icons{
  padding-top: 2px;
  float: right;
}
.icon{
  float: left;
  padding-left: 20px;
  padding-right: 20px;
}
.icon:hover{
  cursor:pointer;
  background-color: rgba(0,0,0,0.3);
}
</style>
